<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="../zujian/layui/css/layui.css">
    <script src="../zujian/layui/layui.js"></script>
    <link rel="stylesheet" href="../zujian/ztree/zTreeStyle/zTreeStyle.css">
    <script src="../zujian/jqueryAndBootStrap/jquery-3.4.1.min.js"></script>
    <script src="../zujian/ztree/jquery.ztree.core.js"></script>
    <script src="../zujian/ztree/jquery.ztree.excheck.js"></script>
    <script src="../zujian/ztree/jquery.ztree.exedit.js"></script>
    <script src="../zujian/ztree/jquery.ztree.exhide.js"></script>
<style type="text/css"></style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <!--水平导航3         水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）    -->
        <ul class="layui-nav layui-bg-green">
            <li class="layui-nav-item">
                <!-- layui-badge 代表有9个消息 -->
                <a href="">控制台<span class="layui-badge">91</span></a>
            </li>
            <li class="layui-nav-item">
                <!-- 显示一点 -->
                <a href="">个人中心<span class="layui-badge-dot"></span></a>
            </li>
            <li class="layui-nav-item">
                <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">修改信息</a></dd>
                    <dd><a href="javascript:;">安全管理</a></dd>
                    <dd><a href="javascript:;">退了</a></dd>
                </dl>
            </li>
        </ul>
    </div>



    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">


                 <!--左树导航区配置zTree-->
                <div class="content_wrap"  >
                    <div class="zTreeDemoBackground left">
                        <ul id="treeDemo1" class="ztree" lay-filter="treeDemo01"></ul>
                    </div>
                </div>





        </div>
    </div>





    <div class="layui-body">
        <!-- 内容主体区域 -->

        <div class="layui-tab" lay-allowClose="true" lay-filter="demo010">
            <ul class="layui-tab-title">
                <!--<li class="layui-this" lay-id="xxx1">网站设置</li>-->
                <!--<li lay-id="xxx2">用户基本管理</li>-->
                <!--<li lay-id="xxx3">权限分配</li>-->
                <!--<li lay-id="xxx4">全部历史商品管理文字长一点试试</li>-->
                <!--<li lay-id="xxx5">订单管理</li>-->
            </ul>
            <div class="layui-tab-content">
                <!--<div class="layui-tab-item layui-show">1</div>-->
                <!--<div class="layui-tab-item">2</div>-->
                <!--<div class="layui-tab-item">3</div>-->
                <!--<div class="layui-tab-item">4</div>-->
                <!--<div class="layui-tab-item">5</div>-->
                <!--<div class="layui-tab-item">6</div>-->
            </div>
        </div>


    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>

<script>

    var url1;
    var element1;
    var id1;
    // 下面是layui
    //JavaScript代码区域
    layui.use('element', function(){
          element1 = layui.element;
    });

    //ztree点击
    function ztreeonclick(event, treeId, treeNode) {
        url1=treeNode.url1;
        id1=treeNode.id;
        //先删除原来有的那个为id1的tab
        element1.tabDelete('demo010', id1);
        //添加一个tab
        tabAdd(element1,url1,id1,'选项卡标题');
        //变换tab到当前
        element1.tabChange('demo010',id1);
    }


    // layui tab的添加
    function tabAdd(element,url,id,biaoTi){
        element.tabAdd('demo010', {
            title: biaoTi
            ,content: '<iframe frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" align="middle" name="fuckfuck" src ="'+url+'" height=600 width=1060 ></iframe>' //支持传入html
            ,id: id
        });
    }
    // 控制台点击
    function kongzhitai(){
        alert('点击控制台');
        let siIdKongZhiTai='kongZhiTaiAnNiuSiId';
        //先删除原来有的那个为id1的tab   kongZhiTaiAnNiuSiId 就是控制台按钮死id的意思
        element1.tabDelete('demo010',siIdKongZhiTai);
        //添加一个tab
        tabAdd(element1,'https://www.baidu.com',siIdKongZhiTai,'选项卡标题');
        //变换tab到当前
        element1.tabChange('demo010',siIdKongZhiTai);
    }



//下面是ZTree
    var setting = {
        view: {
            /**
             用于在节点上固定显示用户自定义控件
             1. 大数据量的节点加载请注意：在 addDiyDom 中针对每个节点 查找 DOM 对象并且添加新 DOM 控件，
             肯定会影响初始化性能；如果不是必须使用，建议不使用此功能
             2. 属于高级应用，使用时请确保对 zTree 比较了解。
             默认值：null
             * */
            addDiyDom:null,
            //点击节点时，按下 Ctrl 或 Cmd 键是否允许取消选择操作。
            //如果不需要此功能，请设置为 false。
            //默认值: true
            // true / false 分别表示 支持 / 不支持 配合 Ctrl 或 Cmd 键进行取消节点选择的操作
            autoCancelSelected: false,
            //  true / false 分别表示双击节点 切换 / 不切换 展开状态
            dblClickExpand: true,
            //三种预定速度之一的字符串("slow", "normal", or "fast")
            //设置为 "" 时，不显示动画效果
            expandSpeed: "fast",
            //节点文字显示样式。个性化文字样式，只针对 zTree 在节点上显示的<A>对象。
            //默认值：{}  比如  {color:"red", background:"blue"}
            fontCss : {color:"red"},
            //设置 name 属性是否支持 HTML 脚本
            //如果允许 HTML 脚本，请根据自己的需求做校验，避免出现 js 注入等安全问题。
            //默认值: false
            //true / false 分别表示 支持 / 不支持 HTML 脚本
            nameIsHTML: true,
            //设置是否允许同时选中多个节点。
            selectedMulti:true,
            //显示节点图标 默认 true
            showIcon:true,
            //是否显示节点之间的连线
            showLine:true,
            /**
             设置 zTree 是否显示节点的 title 提示信息(即节点 DOM 的 title 属性)。
             请务必与 setting.data.key.title 同时使用。
             默认值：true
             * */
            showTitle: true,
            /**
             设置 zTree 是否允许可以选择 zTree DOM 内的文本。
             默认值：false
             * */
            txtSelectedEnable: true,
            /**
             用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
             请务必与 setting.view.removeHoverDom 同时使用；属于高级应用，使用时请确保对 zTree 比较了解。
             默认值：null
             * */
            addHoverDom: null,
            //用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
            //请务必与 addHoverDom 同时使用；属于高级应用，使用时请确保对 zTree 比较了解。
            //默认值：null
            removeHoverDom: null,
        }
        //开启  simpleData  使用zNodes的非完全json嵌套模式
        ,
        data: {
            //使用简单的zTree
            simpleData: {
                enable: true,
                // 节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]
                //默认值："id"
                idKey: "id",
                //节点数据中保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]
                //默认值："pId"
                pIdKey: "pId",
                //用于修正根节点父节点数据，即 pIdKey 指定的属性值。[setting.data.simpleData.enable = true 时生效]
                //默认值：null
                rootPId: 0
            },
            keep: {
                /**
                 zTree 的节点叶子节点属性锁，是否始终保持 isParent = false
                 默认值：false
                 true / false 分别表示 锁定 / 不锁定 叶子节点属性
                 如果设置为 true，则所有 isParent = false 的节点，都无法添加子节点
                 * */
                leaf: true,
                /**
                 zTree 的节点父节点属性锁，是否始终保持 isParent = true
                 默认值：false
                 true / false 分别表示 锁定 / 不锁定 父节点属性
                 如果设置为 true，则所有 isParent = true 的节点，即使该节点的子节点被全部删除或移走，依旧保持父节点状态。
                 * */
                parent: false
            },
            //key里面就是自定义属性名称名 字的地方
            key: {
                //zTree 节点数据中保存 check 状态的属性名称。查看是否选择用
                // treeNode.下面设置的属性名
                checked: "checked",
                // zTree 节点数据中保存子节点数据的属性名称。
                //  默认值："children"
                //设置成如下,如果要取该节点所有的子节点, 则用 treeNode.nodes
                children: "children",
                //zTree 节点数据保存节点是否为父节点的属性名称。
                //默认值："isParent"
                isParent: "isParent",
                //zTree 节点数据保存节点是否隐藏的属性名称。
                // 默认值："isHidden"
                isHidden: "isHidden",
                //  zTree 节点数据保存节点名称的属性名称。
                // 默认值："name"
                name: "name",
                //zTree 节点数据保存节点提示信息的属性名称。[setting.view.showTitle = true 时生效]
                //如果设置为 "" ，则自动与 setting.data.key.name 保持一致，避免用户反复设置
                // 默认值：""
                title: "title",
                //设置url在节点的属性名称
                url:"url"
            }
        }
        ,
        check: {
            //使用check
            enable: true,
            /**
             当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true 。[setting.check.enable = true 时生效]
             1、只使用于初始化节点时，便于批量操作。 对于已存在的节点请利用 updateNode 方法单个节点设置。
             默认值: false
             true 表示 新加入子节点时，自动继承父节点 nocheck = true 的属性。
             false 表示 新加入子节点时，不继承父节点 nocheck 的属性
             * */
            nocheckInherit: true,
            /**
             当父节点设置 chkDisabled = true 时，设置子节点是否自动继承 chkDisabled = true 。[setting.check.enable = true 时生效]
             1、只使用于初始化节点时，便于批量操作。 对于已存在的节点请利用 setChkDisabled 方法单个节点设置。
             默认值: false
             true 表示 新加入子节点时，自动继承父节点 chkDisabled = true 的属性。
             false 表示 新加入子节点时，不继承父节点 chkDisabled 的属性。
             注意: disable就是可看不可用的意思
             * */
            chkDisabledInherit: true,
            /**
             设置自动关联勾选时是否触发 beforeCheck / onCheck 事件回调函数。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效]
             1、如果设置 setting.check.chkboxType = { "Y": "", "N": "" }，将不会有任何自动关联勾选的操作。
             2、如果开启触发，对于节点较多的树将会影响性能，因为所有被联动勾选的操作都会触发事件回调函数，请根据需要决定是否使用此功能。
             默认值: false
             * */
            // autoCheckTrigger: true,
            /**
             勾选框类型(checkbox 或 radio）[setting.check.enable = true 时生效]
             默认值："checkbox"
             chkStyle = "checkbox" 时，显示 checkbox 选择框，setting.check.chkboxType 属性有效。
             chkStyle = "radio" 时，显示 radio 选择框， setting.check.radioType 属性有效。
             请注意大小写，不要改变
             * */
            chkStyle: "checkbox",
            /**
             勾选 checkbox 对于父子节点的关联关系。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效]
             默认值：{ "Y": "ps", "N": "ps" }
             Y 属性定义 checkbox 被勾选后的情况；
             N 属性定义 checkbox 取消勾选后的情况；
             "p" 表示操作会影响父级节点；
             "s" 表示操作会影响子级节点。
             请注意大小写，不要改变
             * */
            chkboxType: { "Y": "s", "N": "s" },

            /**
             radio 的分组范围。[setting.check.enable = true 且 setting.check.chkStyle = "radio" 时生效]
             默认值："level"
             radioType = "level" 时，在每一级节点范围内当做一个分组。
             radioType = "all" 时，在整棵树范围内当做一个分组。
             请注意大小写，不要改变
             * */
            // radioType: "level"
            // chkStyle: "radio",

        },
        edit: {
            // 这项为true的时候 , 节点的url不会跳转,false的时候会跳转
            enable: false,
            //编辑节点名称时候初始时候是全选
            editNameSelectAll: true,
            //    设置是否显示删除按钮。[setting.edit.enable = true 时生效]
            //         当点击某节点的删除按钮时：
            // 1、首先触发 setting.callback.beforeRemove 回调函数，用户可判定是否进行删除操作。
            // 2、如果未设置 beforeRemove 或 beforeRemove 返回 true，则删除节点并触发 setting.callback.onRemove 回调函数。
            // 默认值：true
            showRemoveBtn: true,
            //鼠标移动到删除子节点时候显示的信息
            removeTitle: "删除节点",
            //是否显示编辑名字的按钮
            showRenameBtn: true,
            //鼠标放在编辑名字上的显示
            renameTitle: "编辑节点名称",
            //拖拽
            drag: {
                /**
                 拖拽时父节点自动展开是否触发 onExpand 事件回调函数。[setting.edit.enable = true 时生效]
                 默认值：false
                 true / false 分别表示 触发 / 不触发 onExpand 事件回调函数。
                 * */
                autoExpandTrigger: true,
                /**
                 1、isCopy = true; isMove = true 时，拖拽节点按下 Ctrl 或 Cmd 键表示 copy; 否则为 move
                 2、isCopy = true; isMove = false 时，所有拖拽操作都是 copy
                 3、isCopy = false; isMove = true 时，所有拖拽操作都是 move
                 4、isCopy = false; isMove = false 时，禁止拖拽操作
                 * */
                //拖拽时, 设置是否允许复制节点。[setting.edit.enable = true 时生效]
                // 默认值：true
                isCopy: true,
                //拖拽时, 设置是否允许移动节点。[setting.edit.enable = true 时生效]
                //默认值：true
                isMove: true,
                /**
                 拖拽到目标节点时，设置是否允许移动到目标节点前面的操作。[setting.edit.enable = true 时生效]
                 拖拽目标是 根 的时候，不触发 prev 和 next，只会触发 inner
                 此功能主要作用是对拖拽进行适当限制（辅助箭头），需要结合 next、inner 一起使用，才能实现完整功能。
                 默认值：true
                 true / false 分别表示 允许 / 不允许 移动到目标节点前面
                 * */
                prev:true,
                /**
                 拖拽到目标节点时，设置是否允许移动到目标节点后面的操作。[setting.edit.enable = true 时生效]
                 拖拽目标是 根 的时候，不触发 prev 和 next，只会触发 inner
                 此功能主要作用是对拖拽进行适当限制（辅助箭头），需要结合 prev、inner 一起使用，才能实现完整功能。
                 默认值：true
                 * */
                next: true,
                /**
                 拖拽到目标节点时，设置是否允许成为目标节点(必须是isParent为true的,即必须拖拽到父节点)的子节点。[setting.edit.enable = true 时生效]
                 拖拽目标是 根 的时候，不触发 prev 和 next，只会触发 inner
                 此功能主要作用是对拖拽进行适当限制（辅助箭头），需要结合 prev、next 一起使用，才能实现完整功能。
                 默认值：true
                 * */
                inner: true,
                /**
                 拖拽节点成为根节点时的 Tree 内边界范围 (单位：px)。[setting.edit.enable = true 时生效]
                 默认值：10
                 * */
                borderMax: 20,
                /**
                 判定是否拖拽操作的最小位移值 (单位：px)。[setting.edit.enable = true 时生效]
                 根据自己的需求可适当调整此值，如果太小容易导致点击鼠标时误操作进行拖拽
                 默认值：5
                 * */
                minMoveSize: 20,
                /**
                 拖拽多个兄弟节点时，浮动图层中显示的最大节点数。 多余的节点用...代替。[setting.edit.enable = true 时生效]
                 默认值：5
                 请根据自己的需求适当调整此值
                 * */
                maxShowNodeNum: 10,
                /**
                 拖拽时父节点自动展开的延时间隔。 (单位：ms)[setting.edit.enable = true 时生效]
                 默认值：500
                 请根据自己的需求适当调整此值
                 * */
                autoOpenTime: 6000,

            }
        },
        callback: {
            onClick: ztreeonclick,
            //用于捕获节点被拖拽的事件回调函数
            // onDrag:function (event, treeId, treeNodes) {
            //     if(treeNodes){
            //         treeNodes.forEach(v=>{
            //             alert(v.name)
            //         })
            //     }
            // },
            // onMouseUp:function(event, treeId, treeNode){
            //     console.log("===《"+treeNode.pId+"》==《"+treeNode.name+"》==========");
            // },
            /**
             * 用于捕获节点拖拽操作结束的事件回调函数
             如果设置了 setting.callback.beforeDrop 方法，且返回 false，将无法触发 onDrop 事件回调函数。
             默认值：null

             treeNodes Array(JSON)
             被拖拽的节点 JSON 数据集合
             如果拖拽操作为 移动，treeNodes 是当前被拖拽节点的数据集合。
             如果拖拽操作为 复制，treeNodes 是复制后 clone 得到的新节点数据。

             targetNode JSON
             成为 treeNodes 拖拽结束的目标节点 JSON 数据对象。
             如果拖拽成为根节点，则 targetNode = null
             * */
            onDrop:function (event, treeId, treeNodes, targetNode, moveType) {
                treeNodes.forEach(v=>{
                    console.log("*********得到拖拽后的节点集合********《"+v.pId+"》*******《"+v.name+"》*********************")
                })
                console.log("===《"+targetNode.pId+"》==《"+targetNode.name+"》==========");
                console.log("------《"+event.target+"》----------")
            }
        }
    };
    //注意节点的顺序需要自己排序,然后放入下面集合
    var zNodes =[
        //  open:true  默认打开  // iconOpen打开时候的图标, // iconClose关闭时候的图标
        { id:"我", pId:0, name:"展开、折叠 自定义图标不同",title:"展开、折叠 自定义图标不同",iconSkin:"pIcon01",open:true,iconOpen:"../zujian/ztree/zTreeStyle/img/diy/1_open.png", iconClose:"../zujian/ztree/zTreeStyle/img/diy/1_close.png"},
        // //设置  无子节点的父节点用 isParent:true  // icon为图标显示
        //url超链接 如果需要灵活控制超链接跳转，请利用 onClick 事件回调函数进行控制，
        //同超链接 target 属性: "_blank", "_self" 或 其他指定窗口名称
        //省略此属性，则默认为 "_blank"  //注意 如果不想让跳转,而是通过js控制,需要自定义一个属性代替url 比如url1
        { id:11, pId:"我",name:"叶子节点1-1",url1:"http://www.treejs.cn/",target:"_blank", icon:"../zujian/ztree/zTreeStyle/img/diy/2.png",isParent:true},
        // checked:true就是被选中的意思// "chkDisabled":true就是能看不能被操作的意思,界面会暗下来
        { id:12, name:"测试表单",url1:"./测试form表单页面.html", pId:"我",diy1:"用于保存节点的其他自定义数据信息，不要与 zTree 使用的属性相同即可，用户可随意设定。",checked:true, "chkDisabled":true,icon:"../zujian/ztree/zTreeStyle/img/diy/3.png"},
        { id:13, pId:"我", name:"测试组件页面",url1:"./ceshi左树右表03_测试组件用页面.html",icon:"../zujian/ztree/zTreeStyle/img/diy/5.png"},
        { id:2, pId:0, name:"展开、折叠 自定义图标相同", open:true, icon:"../zujian/ztree/zTreeStyle/img/diy/4.png"},
        // font  粗体字 // nocheck:true就是本节点不再有选择框
        { id:21, pId:2,font:{'font-weight':'bold'},nocheck:true, name:"叶子节点1", icon:"../zujian/ztree/zTreeStyle/img/diy/6.png"},
        // font斜字体
        { id:22, pId:2,font:{'font-style':'italic'}, name:"叶子节点2", icon:"../zujian/ztree/zTreeStyle/img/diy/7.png"},
        // font 有背景的字体
        { id:23, pId:2,font:{'background-color':'black', 'color':'white'}, name:"叶子节点3", icon:"../zujian/ztree/zTreeStyle/img/diy/8.png"},
        //font 红色字体
        { id:3, pId:0, name:"不使用自定义图标",font:{'color':'red'}, open:true },
        // font 蓝色字体// isHidden:true,表示隐藏该项
        { id:31, pId:3,isHidden:true,font:{'color':'blue'}, name:"叶子节点1"},
        // halfCheck:true表示半勾选状态,半勾选状态就是框暗了下来,但是没有对号
        { id:32, pId:3, name:"叶子节点2",halfCheck:true},
        { id:33, pId:3, name:"<span style='color:blue;margin-right:0px;'>view</span>.<span style='color:red;margin-right:0px;'>nameIsHTML</span>"}

    ];

    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo1"), setting, zNodes);
    });
</script>


<!-- 下面是左树的zTree-->
<script type="text/javascript">
    function getFont(treeId, node) {
        return node.font ? node.font : {};
    }


</script>
</body>
</html>